什麼是 CSS 預處理器?
前端與後端、APP 最大差異在於瀏覽器,所以寫 CODE 要注意瀏覽器的支援程度。很新的語法在舊的瀏覽器上未必能用,不能用的東西,自己轉換就能用了,也就是很新的語法透過工具轉換後,在舊的瀏覽器上也可以使用了。
CSS 如果融合程式的概念,有 Function、變數,會是個很棒的體驗。
css 預處理器,就是在做上述事情。先寫某個語法,透過 css 預處理器轉換後變成 css,所以最後還是 css。
CSS 預處理器: SASS, SCSS
使用目的 => 開發更順利
原因 :
- 更有語意(舉例 : 巢狀結構更好閱讀與理解)
- 透過預處理器變成舊瀏覽器也能跑的形式
SCSS 簡介
因為需要編譯,所以需要程式輔助。npm install -g sass
,透過 sass --version
檢視版本。
sass --watch input.scss output.css
是 CML 的指令,第一個參數是 input,第二個參數是 output。
先開一個 style.scss
$primary-color: #333;
div {
color: red
}
輸入指令 : sass style.scss s.css
=> 發現多了兩個檔案, 1. scss.map 2. s.css
這個 map 就是 source map。通常 complie 出來只會顯示行數、東西,如果有 source map 瀏覽器就可以抓到原本的程式碼是甚麼,在 debug 的資訊就可以是原本的資訊。
如果每改一次就要手動編譯一次,有點浪費時間。所以只要在最前面加上 --watch
,就會自動偵測 style.scss 有無變動,有變動的話就會自動幫我們 complie。
一、變數
可以不同的東西,共用同一個變數,這樣改動也會比較容易。 css variable 也可以做到相同事情,只是這個方式瀏覽器的支援度會更大。
SCSS SYNTAX
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
div {
color: $primary-color;
}
二、巢狀
.box {
h1 {
font-size: 24px;
}
nav {
color: $primary-color;
}
}
三、Modules
可以從其他地方 import 進來。
四、Mixins
可以想成 funct,還可以傳參數進去。這樣一來設計上會更彈性。
@mixin full() {
width: 100%;
height: 100%;
}
.box {
@include full();
h1 {
font-size: 24px;
}
nav {
color: $primary-color;
}
}
五、& 表示自己
div {
color: $primary-color;
&:hover {
color: green;
}
}
SCSS 實戰
可以將以前的 css 貼進 scss 的檔案中,他們是相容的。complie 完後他的長相會是 css 的樣子。
好處 : 更有結構、調整東西可以更統一調整。更複雜時,會開檔案,將變數獨立成一個檔案 import 進來。
$gray-01: rgba(0, 0, 0, 0.3);
$error-01: #e74149;
$font-size-title: 36px;
$font-size-input-title: 20px;
$font-size-normal: 16px;
$font-size-small: 14px;
body {
background: $gray-01;
}
.wrapper {
max-width: 645px;
background: white;
margin: 10% auto;
box-shadow: 1.8px 2.4px 5px 0 $gray-01;
border-top: solid 8px #fad312;
padding: 64px 32px;
}
.apply-form {
&__title {
margin: 0;
font-size: $font-size-title;
font-weight: bold;
}
&__desc {
margin-top: 32px;
font-size: $font-size-small;
line-height: 1.5em;
}
&__notice {
color: $error-01;
font-size: $font-size-normal;
margin-top: 20px;
}
&__submit {
background: #fad312;
color: black;
font-size: $font-size-normal;
padding: 12px 32px;
margin-top: 48px;
border: none;
border-radius: 4px;
}
}
.input-block {
margin-top: 55px;
&__title {
font-size: $font-size-input-title;
}
&__desc {
font-size: $font-size-small;
margin-top: 8px;
}
&__input {
margin-top: 20px;
& input[type=text] {
border: solid 1px #d0d0d0;
font-size: $font-size-normal;
padding: 8px;
}
& label {
display: block;
margin-top: 12px;
}
}
}
.required:after {
content: '*';
color: $error-01;
}
footer {
background: black;
color: #999999;
font-size: $font-size-small;
text-align: center;
padding: 24px 12px;
}
補充、
css 預處理器除了 scss, sas 之外還有 less, stylus